<template>
  <a-table :columns="columns" :data-source="cerdatalist" :loading="loading" :pagination="pagination" @change="onClickPagination">

    <!-- 分发次数 -->
    <template #dowtimes="{text,record}">
      <div v-if="record.Bool">{{text}}</div>
      <a-input-number v-model:value="record.dowtimes" :min="0" v-else />
    </template>

    <!-- 权限 -->
    <template #rolename="{ text, record,index }">
      <a-dropdown :trigger="['click']">
        <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
          {{ text }}
          <DownOutlined />
        </a>
        <template v-slot:overlay>
          <a-menu>
            <a-menu-item key="0" @click="onClickSave(record, index,'普通用户')">
              普通用户
            </a-menu-item>
            <a-menu-item key="1" @click="onClickSave(record,index, '高级用户')">
              高级用户
            </a-menu-item>
            <a-menu-item key="2" @click="onClickSave(record,index, '超级管理员')">
              超级管理员
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </template>

    <!-- 私有池次数 -->
    <template #private="{record}">
      <div v-if="record.Bool">
        {{record.rolename===Role.普通用户?'没有权限':record.private}}
      </div>
      <a-input-number v-model:value="record.private" :min="0" v-else-if="record.rolename!==Role.普通用户" />
      <div v-else>没有权限</div>
    </template>

    <!-- 公有池次数 -->
    <template #public="{text,record}">
      <div v-if="record.Bool">{{text}}</div>
      <a-input-number v-model:value="record.public" :min="0" v-else />
    </template>

    <template #todaydow="{text}">
      <a href="javascript:;">{{text}}</a>
    </template>
    <template #todaysuper="{text}">
      <a href="javascript:;">{{text}}</a>
    </template>
    <template #operating="{record,index}">
      <a-button type="primary" @click="onClickView(record)">查看</a-button>
      <a-button type="primary" v-if="record.Bool" @click="record.Bool = false">编辑</a-button>
      <a-button type="primary" v-else @click="onClickSave(record,index)">保存</a-button>
      <a-popconfirm title="您确定要删除此应用吗?" ok-text="是" cancel-text="否" @confirm="onClickDelete(record,index)">
        <a-button type="danger"> 删除账号 </a-button>
      </a-popconfirm>
    </template>
  </a-table>
  <ViewModal :visible='visible' v-if="visible" @onCancel='onCancel' />
</template>

<script lang='ts'>
import { Ref, ref, SetupContext } from "vue";
import { deletes, Role, upuser } from "@/api/userApi";
import { $message } from "../AntDesign/message";
import ViewModal from "@/components/UserModule/ViewModal/ViewModal.vue";
import createStore from "@/store/index";
import { DownOutlined } from "@/components/AntDesign/icons/icons";

export default {
  props: {
    columns: Array,
    cerdatalist: Array,
    pagination: Object,
    loading: Boolean,
    Children: {
      type: Boolean,
      default: true,
    },
  },
  emits: ["onCLickDelete", "onClickPagination"],
  components: {
    ViewModal,
    DownOutlined,
  },

  setup(props: any, ctx: SetupContext) {
    /* 删除事件 */
    async function onClickDelete(record: any, index: number) {
      try {
        const result = await deletes({ id: record._id });
        ctx.emit("onCLickDelete", index);
        $message("success", result.data.message);
      } catch (error) {
        $message("error", error.data.message);
      }
    }

    /* 编辑事件 */
    async function onClickSave(record: any, index: number, rolename?: string) {
      try {
        props.cerdatalist[index].Bool = true;
        if (rolename) props.cerdatalist[index].rolename = rolename;
        const result = await upuser({
          id: record._id,
          privateprice: record.privateprice,
          publicprice: record.publicprice,
          dowtimes: record.dowtimes,
          private: record.private,
          public: record.public,
          rolename,
        });
        $message("success", result.data.message);
      } catch (error) {
        $message("error", error.data.message);
      }
    }

    /* 查看事件 */
    const visible: Ref<boolean> = ref(false);
    function onClickView(record: any) {
      visible.value = true;
      createStore.commit("userDataList", record);
    }

    /* 关闭事件 */
    function onCancel() {
      visible.value = false;
      createStore.commit("userDataList", null);
    }

    /* 分页事件 */
    function onClickPagination(value: {
      current: number;
      pageSize: number;
      total: number;
    }) {
      ctx.emit("onClickPagination", value.current);
    }

    return {
      Role,
      visible,
      onCancel,
      onClickView,
      onClickSave,
      onClickDelete,
      onClickPagination,
    };
  },
};
</script>
<style lang="less" scoped>
.ant-dropdown-link {
  color: #000;
}
.ant-btn:not(:last-child) {
  margin-right: 10px;
}

.ant-input-number {
  display: block;
  margin: 0 auto;
  width: 48px;
  border-radius: 3px;
  .ant-input-number-handler-wrap {
    display: none;
  }
}
</style>